<template>
	<view class="page">
			<view class="box">
				 <view class="title">
				 	<view class="btn"  @click="changeWeek('last')" >上一周</view>
					<view class="dateObj" >
						{{dayText}}
					</view>
				 	<view class="btn" @click="changeWeek('next')" >下一周</view>
		     </view>
		
				 <view class="week">
				 	<text  v-for="(item,index) in weekArr" :key="index" >{{item}}</text>
				 </view>
				 <view class="dayArr">
				 	 <view class="dayItem"  v-for="(item,index) in weekDate" :key="index"  @click="selectDay(item.date)" >
						<view :class="item.date==dayText && item.activeType==1 ? 'active1 active2' : item.date==dayText ? 'active1': item.activeType==1 ? 'active2': ''">
							{{item.day}}
						</view>
				 	</view>
				 </view>
				</view>
		
		
				<view class="colorTips">
		      <text></text>
					<view class="item">
						<view class="icon" >
						</view>
						已退课
					</view>
				</view>
				<view class="menu" style="height: 90rpx;">
					<view class="row" style="border: 0;margin-top:20rpx;">
						<view class="label">
							科目:
						</view>
						<view class="input">
							{{courseStr}}
							<!-- <u-checkbox-group
							          v-model="checkboxVal"
							          placement="row"
							          @change="checkboxChange">
															<u-checkbox
							              :customStyle="{marginRight: '15rpx'}"
							              v-for="(item, index) in courseArr"
							              :key="index"
							              :label="item.subjectName"
							              :name="item.subjectName">
							          </u-checkbox>
							</u-checkbox-group> -->
						</view>
					</view>
				</view>
				<view class="btn" @click="submit" >
					<!-- {{isCancel ? '取消退餐' : '申请退餐' }} -->
					{{'申请退课' }}
				</view>
	</view>
</template>

<script>
	import {getApplyForCancelMealInfoApi,findDorpCourseOrderListApi,getCourseByClassDayApi,submitDorpCourseApi} from '@/common/api/commonApi/commonApi.js'
	export default {
		data() {
			return {
				weekArr: ['一', '二', '三', '四', '五', '六', '日'],
				weekDate: [{
				        text: '一',
				        id: 1,
				        date: '',
				        day: '',
				        activeType: ''
				    },
				    {
				        text: '二',
				        id: 2,
				        date: '',
				        day: '',
				        activeType: ''
				    },
				    {
				        text: '三',
				        id: 3,
				        date: '',
				        day: '',
				        activeType: ''
				    },
				    {
				        text: '四',
				        id: 4,
				        date: '',
				        day: '',
				        activeType: ""
				    },
				    {
				        text: '五',
				        id: 5,
				        date: '',
				        day: '',
				        activeType: ''
				    },
				    {
				        text: '六',
				        id: 6,
				        date: '',
				        day: '',
				        activeType: ''
				    },
				    {
				        text: '日',
				        id: 7,
				        date: '',
				        day: '',
				        activeType: ''
		
				    },
				],
				dayText: '',
				courseStr : '',
				courseArr: [ ],
				selectDayText: '',
				list: [],
				mondayDate: '',
				sundayDate: '',
				checkboxVal:[],
				selectInfoAccount : uni.getStorageSync('selectInfoAccount'),
				isCancel: false,
			}
		},
		methods: {
			submit(){
				let data = {
				    // mealIds: this.checkboxVal.join(','),
					classDay : this.dayText,
				}
				submitDorpCourseApi(data).then(res=>{
					this.getActiveDateType().then(res=>{
							this.setMessage('申请退课成功！')
					})
				})
			},
			changeWeek(type) {
			        let weekDate = this.weekDate
			        if (type == 'next') {
			            weekDate.forEach(item => {
			                item.id += 7
			            })
			        } else {
			            weekDate.forEach(item => {
			                item.id -= 7
			            })
			        }
			       this.weekDate = weekDate
			        this.handleWeek()
					this.dayText = this.weekDate[0].date
			        this.getDetail(this.dayText)
			},
			getData(day) {
			        var today = new Date()
			        var targetday = today.getTime() + 1000 * 60 * 60 * 24 * day
			        today.setTime(targetday)
			        var tYear = today.getFullYear()
			        var tMonth = today.getMonth()
			        var tDate = today.getDate()
			        tMonth = this.doHandMonth(tMonth + 1)
			        tDate = this.doHandMonth(tDate)
			        return tYear + "-" + tMonth + "-" + tDate
			},
			doHandMonth(month) {
			        var m = month
			        if (month.toString().length == 1) {
			            m = "0" + month
			        }
			        return m
			},
			checkboxChange(e){
				console.log(e);
			},
			handleWeek() {
			        let dateObj = new Date()
			        let weekNum = dateObj.getDay()
			        this.weekDate.forEach(item => {
			            item.date = this.getData(-weekNum + item.id)
			            item.day = item.date.substring(8, item.date.length)
			        })
			       
			        this.getActiveDateType()
			},
			getActiveDateType() {
			        let data = {
			            begClassDay: this.weekDate[0].date,
			            endClassDay: this.weekDate[6].date,
			        }
					return findDorpCourseOrderListApi(data).then(res=>{
						let weekDate = this.weekDate
						weekDate.forEach(item2 => {
						        item2.activeType = ''
						})
						res.dorpCourseOrderList.forEach(item => {
							item.date = item.dorpCourseDate.split(' ')[0]
						    weekDate.forEach(item2 => {
						        if (item2.date == item.date) {
						            item2.activeType = 1
						        }
						    })
						})
						this.weekDate = []
						this.weekDate = weekDate
					})
			
			},
			selectDay(e) {
			        console.log(e);
					this.dayText = e
			        this.getDetail(e)
					this.getActiveDateType()
			},
			initWeekDate() {
		        this.handleWeek()
		        let today = new Date()
		        let dateObj = new Date(today.getTime());
		        let year = dateObj.getFullYear();
		        let month = dateObj.getMonth() + 1;
		        month = month.toString().padStart(2, '0')
		        let day = dateObj.getDate();
		        day = day.toString().padStart(2, '0')
		        let dayText = `${year}-${month}-${day}`
		        this.dayText = dayText
		        this.getDetail(dayText)
		    },
			getDetail(day){
				console.log(day);
				let data = {
				    classDay: day,
				}
				return getCourseByClassDayApi(data).then(res=>{
					this.courseStr = ''
					if(res.course){
						this.courseStr = res.course.subjectName
					}
					
					// this.checkboxVal = []
					// if(res.orderList && res.orderList.length){
					// 	this.isCancel = true
					// 	// res.orderList.forEach(item=>{
					// 	// 	this.checkboxVal.push(item.meaiId) 
					// 	// })
					// }else{
					// 	this.isCancel = false
					// }
					
				})
			},
			// getMealType(){
			// 	 getApplyForCancelMealInfoApi().then(res=>{
			// 		// this.courseArr = res.mealList
			// 	})
			// }
		},
		components: {
		},
		onLoad({}) {
			let dateObj = new Date()
			let weekNum = dateObj.getDay()
			this.mondayDate = this.getData(-weekNum + 1)
			this.sundayDate = this.getData(-weekNum + 7)
			// this.getMealType()
		},
		onShow() {
			 this.initWeekDate()
		},
	}
</script>

<style lang="scss" scoped>
.page {
    background-color: #fff;
    height: 100vh;
}

.page .colorTips {
    display: flex;
    justify-content: space-between;
    margin-top: 20rpx;
    width: 95%;
    padding-right: 30rpx;
    padding-left: 30rpx;
    margin-bottom: 30rpx;
}
.colorTips text{
  color: #4089f0;
}

.page .colorTips .item {
    display: flex;
    margin-right: 20rpx;
}

.page .colorTips .item .icon {
    background: #4089f0;
    width: 40rpx;
    height: 40rpx;
    border-radius: 50%;
    margin-right: 5rpx;
}

.page .menu {
    border-top: 2rpx solid #eaebef;
}

.page .menu .row {
    font-size: 32rpx;
    display: flex;
    border-bottom: 2rpx solid #eaebef;
}

.page .menu .row .label {
    width: 160rpx;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-right: 20rpx;
    color: #333;
	height: 80rpx;
}

.page .menu .row .val {
    flex: 1;
    padding: 20rpx 0;
    display: flex;
    flex-wrap: wrap;
    padding-right: 10rpx;
}

.page .menu .row .val text {
    padding: 10rpx;
}

.page .menu .row .input {
    padding: 20rpx 0;
    flex: 1;
    display: flex;
    align-items: center;
}

.page .btn {
    background-color: #2979ff;
    color: #fff;
    border-radius: 50rpx;
    font-size: 32rpx;
    width: 90%;
    margin: 30rpx auto;
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: center;
}

.box {
    padding: 0 30rpx;
}

.box .title .btn {
    height: 50rpx;
    width: 120rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 28rpx;
}

.title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* height: 90rpx; */
    border-bottom: 2rpx solid #eaebef;
}

.title .dateObj {
    color: #111111;
    font-size: 34rpx;
    flex: 1;
    display: flex;
    justify-content: center;
}

.title .icon {
    display: grid;
    place-items: center;
    width: 50rpx;
    height: 50rpx;
    background-color: #4089f0;
    border-radius: 50%;
}

.week {
    display: flex;
    color: #111;
}

.week text {
    width: 100rpx;
    height: 80rpx;
    display: grid;
    place-items: center;
    font-size: 30rpx;
}

.dayArr {
    display: flex;
    flex-wrap: wrap;
}

.dayArr .dayItem {
    width: 14.2%;
    height: 80rpx;
	display: flex;
	justify-content: center;
	align-items: center;
   
}

.dayArr .dayItem .active1 {
    position: relative;
    // width: 60rpx !important;
    // height: 60rpx !important;
    // background-color: #5ac725;

    // color: #fff;
}
.active1::after{
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate( -50% , -50%);
	width: 60rpx;
	height: 60rpx;
	border-radius: 50%;
	border: 2rpx solid #5ac725;
}

.dayArr .dayItem .active2 {
    border-radius: 50%;
    width: 48rpx;
    height: 48rpx;
    background-color: #4089f0;
	display: flex;
	justify-content: center;
	align-items: center;
    color: #fff;
}

.totalTitle{
	margin-left: 30rpx;
	font-size: 34rpx;
	font-weight: 600;
	color: #111;
}

.totalRow{
	margin-left: 30rpx;
}
.totalRow .val{
	font-size: 32rpx;
	line-height: 70rpx;
	margin-left: 42rpx;
}
</style>
